import "./index.css";
import React from "react";
// 第一种方式 使用interface定义props
interface Props {
  title?: string;
  children?: React.ReactNode;
  cb?: (params: string) => void;
}
// 第二种方式 React.FC函数组件方式定义props

// Partial将Props中的所有属性变为可选的
const defaultProps: Partial<Props> = {
  title: "默认标题"
};

const Card: React.FC<Props> = (props) => {
  // ------------------------
  // 接收方
  window.addEventListener("on-test", (event) => {
    console.log(`${title}收到了`, event.customObj);
  });
  // ------------------------
  const { title, children, cb } = { ...defaultProps, ...props };
  return (
    <div className="card">
      <header>
        <div>{title}</div>
        <div>副标题</div>
      </header>
      <main>{children}</main>
      <footer>
        <button onClick={() => window.onShow()}>确认</button>
        {/* 子传父通过父组件传过来的回调函数去传值 */}
        <button onClick={() => cb && cb("取消了")}>取消</button>
      </footer>
    </div>
  );
};

export default Card;
